// scss
// .radio-image {
//         @include radio-image("../img/liuyao/radio.png", "../img/liuyao/radio-checked.png", 20px, 20px);
//     }

// html
// <div class="item form-flex">
//     <div class="radio-image z-flex">
//         <input type="radio" name="qigua" checked>
//         <label>单数起卦</label>
//     </div>
//     <div class="radio-image z-flex">
//         <input type="radio" name="qigua">
//         <label>双数起卦</label>
//     </div>
// </div>



@mixin radio-image($image,$imageChecked, $w, $h,$radio-iamge-pa-l) {
    
    position: relative;
    input {
        position: absolute;
        height: 100%;
        width: 100%;
        opacity: 0;
        left: 0;
        top: 0;
        + label {
            background: url($image) no-repeat 0 center;
            background-size: $w auto;
            padding-left: $w + $radio-iamge-pa-l;
            height: $h;
            line-height: $h;
            display: inline-block;
        }
        &:checked {
            + label {
                background-image: url($imageChecked);
            }
        }
    }
}
